<template>
  <div>
    <el-dialog v-model="dialogVisible" :title="props.title" width="50%">
      <el-form
        ref="addRulsRef"
        style="min-width: 700px"
        :model="dialogList"
        label-width="120"
        class="demo-ruleForm"
        status-icon
        :rules="addRules"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="站点名称"
              prop="site_name"
              name="site_name"
              required
            >
              <el-input
                v-model="dialogList.site_name"
                placeholder="请输入站点名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="站点简称"
              prop="domain_abbreviation"
              name="domain_abbreviation"
              required
            >
              <el-input
                v-model="dialogList.domain_abbreviation"
                placeholder="请输入站点简称"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="域名"
              prop="domain_name"
              name="domain_name"
              required
            >
              <el-input
                v-model="dialogList.domain_name"
                placeholder="请输入域名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="路径" prop="path" name="path" required>
              <el-input
                v-model="dialogList.path"
                placeholder="各站点资源存放路径"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="域名别称" prop="domain" name="domain">
              <el-input
                v-model="dialogList.domain"
                placeholder="用','分开"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="域名重定向"
              prop="domain_redirection"
              name="domain_redirection"
            >
              <el-input
                v-model="dialogList.domain_redirection"
                placeholder="用','分开"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="使用相对路径"
              prop="relative_path"
              name="relative_path"
              required
            >
              <el-radio-group v-model="dialogList.relative_path">
                <el-radio value="0" size="large">是</el-radio>
                <el-radio value="1" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="访问协议"
              prop="access_protocol"
              name="access_protocol"
              required
            >
              <el-select
                v-model="dialogList.access_protocol"
                clearable
                placeholder="请选择访问协议"
              >
                <el-option
                  v-for="item in protocolOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="动态页后缀"
              prop="dynamic"
              name="dynamic"
              required
            >
              <el-select
                v-model="dialogList.dynamic"
                clearable
                placeholder="请选择动态页后缀(建议使用.jhtml)"
              >
                <el-option
                  v-for="item in dynamicOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="静态页后缀"
              prop="static"
              name="static"
              required
            >
              <el-select
                v-model="dialogList.static"
                clearable
                placeholder="请选择静态页后缀(建议使用.jhtml)"
              >
                <el-option
                  v-for="item in dynamicOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="静态页目录"
              prop="static_page "
              name="static_page"
            >
              <el-input
                v-model="dialogList.static_page"
                placeholder="请输入静态页目录"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="开启静态首页"
              prop="open_static"
              name="open_static"
              required
            >
              <el-radio-group v-model="dialogList.open_static">
                <el-radio value="0" size="large">是</el-radio>
                <el-radio value="1" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="后台本地化"
              prop="background"
              name="background"
              required
            >
              <el-input
                v-model="dialogList.background"
                placeholder="请输入后台本地化"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="前台本地化"
              prop="localization"
              name="localization"
              required
            >
              <el-input
                v-model="dialogList.localization"
                placeholder="请输入前台本地化"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
             <el-form-item
              label="开启回收站"
              prop="recycle_bin"
              name="recycle_bin"
              required
            >
              <el-radio-group v-model="dialogList.recycle_bin">
                <el-radio value="0" size="large">是</el-radio>
                <el-radio value="1" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="是否主站"
              prop="master_station "
              name="master_station"
            >
              <el-radio-group v-model="dialogList.master_station">
                <el-radio value="0" size="large">是</el-radio>
                <el-radio value="1" size="large">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="终审级别" prop="level" name="level">
              <el-select
                v-model="dialogList.level"
                clearable
                placeholder="请选择终审级别"
              >
                <el-option
                  v-for="item in levelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="首页模版"
              prop="home_template "
              name="home_template"
            >
              <el-input
                v-model="dialogList.home_template"
                placeholder="请输入首页模版"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onSubmit(addRulsRef)">
            保存
          </el-button>
          <el-button @click="cancel(addRulsRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ref, reactive, defineExpose, defineProps, watch } from 'vue'

// 访问路径选项
const protocolOptions = ref([
  { value: 'http', label: 'http://' },
  { value: 'https', label: 'https://' }
])
// 动态页面后缀选项
const dynamicOptions = ref([
  { value: '.jhtml', label: '.jhtml' },
  { value: '.html', label: '.html' }
])
const levelOptions = ref([
  { value: 'none', label: '无需审核' },
  { value: 'one', label: '一级审核' },
  { value: 'two', label: '二级审核' },
  { value: 'three', label: '三级审核' },
  { value: 'four', label: '四级审核' }
])
const dialogVisible = ref(false)
const addRulsRef = ref()
const dialogList = ref({
  domain_name: '',
  site_name: '',
  path: '',
  dynamic: '',
  static: '',
  localization: '',
  // 其他数据
  domain_abbreviation: '',
  domain: '',
  domain_redirection: '',
  relative_path: '',
  access_protocol: '',
  static_page: '',
  open_static: '',
  background: '',
  recycle_bin: '',
  master_station: '',
  level: '',
  home_template: ''
})
// 校验规则
const addRules = reactive({
  site_name: [{ required: true, message: '请输入站点名称', trigger: 'blur' }],
  domain_abbreviation: [
    { required: true, message: '请输入站点简称', trigger: 'blur' }
  ],
  domain_name: [{ required: true, message: '请输入域名', trigger: 'blur' }],
  path: [{ required: true, message: '请输入地址', trigger: 'blur' }],
  relative_path: [
    { required: true, message: '请选择相对路径', trigger: ['change', 'blur'] }
  ],
  access_protocol: [
    { required: true, message: '请选择访问协议', trigger: ['change', 'blur'] }
  ],
  dynamic: [
    { required: true, message: '请选择动态页后缀', trigger: ['change', 'blur'] }
  ],
  static: [
    { required: true, message: '请选择静态页后缀', trigger: ['change', 'blur'] }
  ],
  open_static: [
    {
      required: true,
      message: '请选择开启静态首页',
      trigger: ['change', 'blur']
    }
  ],
  background: [
    { required: true, message: '请选择后台本地化', trigger: 'change' }
  ],
  localization: [
    { required: true, message: '请选择前台本地化', trigger: 'blur' }
  ],
  recycle_bin: [
    { required: true, message: '请选择开启回收站', trigger: ['change', 'blur'] }
  ]
})
const props = defineProps({
  title: String,
  dialogRowList: Object
})
const monthOptions = ref([])

const dayOptions = ref([])
watch(
  () => props.dialogRowList,
  (val) => {
    dialogList.value.domain_name = val.domain_name
    dialogList.value.site_name = val.site_name
    dialogList.value.dynamic = val.dynamic
    dialogList.value.static = val.static
    dialogList.value.localization = val.localization
  },
  { immediate: true }
)
const getList = () => {
  for (let i = 1; i <= 12; i++) {
    monthOptions.value.push({
      id: i,
      name: i
    })
  }
  for (let i = 1; i <= 28; i++) {
    dayOptions.value.push({
      id: i,
      name: i
    })
  }
}
// 保存
const onSubmit = async (formEl) => {
  console.log(formEl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 取消
const cancel = (formEl) => {
  dialogVisible.value = false
  formEl.resetFields()
}
defineExpose({
  dialogVisible
})
getList()
</script>

<style lang="scss" scoped>
.button_row {
  text-align: center;
  margin-top: 30px;
}
</style>
